<template>
    <Header />
    <div class="container">
        <v-md-editor v-model="data.content" mode="preview"></v-md-editor>
        <div class="bottom">
            <span
                class="time"
                :class="!store.state.userinfo ? 'right-time' : ''"
            >
                发布时间：{{ data.createTime }}
            </span>
            {{ data.userId }}
            <el-button
                class="operation"
                text
                type="danger"
                @click="dialogVisible = true"
                v-if="
                    store.getters.isLogin &&
                    store.state.userinfo.userId == data.user_id
                "
            >
                删除文章
            </el-button>
            <el-button
                class="operation"
                text
                @click="$router.push(`/write/${data.id}`)"
                v-if="
                    store.getters.isLogin &&
                    store.state.userinfo.userId == data.user_id
                "
            >
                编辑文章
            </el-button>
        </div>
        <div class="message">
            <h3>发表评论</h3>
            <div class="messageList" v-if="store.getters.isLogin">
                <div class="content" style="display: flex">
                    <el-input
                        v-model="messageForm.content"
                        placeholder="善语结善缘，恶言伤人心~"
                        maxLength="100"
                    ></el-input>
                    <el-button type="primary" @click="submit">发布</el-button>
                </div>
                <el-divider />
                <div class="info">
                    <img :src="messageForm.avatar" alt="" width="30" />
                    <span>{{ messageForm.username }}</span>
                </div>
            </div>
            <div class="messageList" v-for="item in messageList">
                <div class="content" v-html="item.content" ></div>
                <el-divider />
                <div class="info">
                    <img :src="item.avatar || tx" alt="" width="30" />
                    <span>{{ item.username }}</span>
                    <span class="send" >
                        <el-button type="primary" @click="sendUser = item.username; sendDialogVisible=true;" >回复</el-button>
                    </span>
                    <span class="create-time">{{ item.create_time }}</span>
                </div>
            </div>
        </div>
    </div>
    <el-dialog title="删除" v-model="dialogVisible" width="30%">
        <p>是否删除该文章？</p>
        <template #footer>
            <span class="dialog-footer">
                <el-button
                    @click="dialogVisible = false"
                    style="margin-right: 15px"
                >
                    取消
                </el-button>
                <el-button type="danger" @click="delArticle">确认</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog :title="`回复 ${sendUser}`" v-model="sendDialogVisible" width="30%" @close="sendMessage = ''" >
        <el-input v-model="sendMessage" ></el-input>
        <template #footer>
            <span class="dialog-footer">
                <el-button
                    @click="sendDialogVisible = false"
                    style="margin-right: 15px"
                >
                    取消
                </el-button>
                <el-button type="primary" @click="send">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onUnmounted, reactive, ref } from 'vue';
import router from '@/router';
import request from '@/api';
import Header from '@/components/Header.vue';
import { Message, MessageVO } from '@/types/index';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import tx from '@/assets/tx.png';
const store = useStore();
const dialogVisible = ref(false);
const sendDialogVisible = ref(false);
const sendMessage = ref('');
const sendUser = ref('')
// 获取路由传参
const id = router.currentRoute.value.params.id;
const data = ref({
    id: '',
    user_id: '',
    title: '',
    content: '',
    createTime: '',
});

const messageForm = reactive<MessageVO>({
    content: '',
    createTime: new Date(),
    userId: store.state.userinfo.userId,
    articleId: parseInt(id as string),
    username: store.state.userinfo.username,
    avatar: store.state.userinfo.avatar || tx,
});

const messageList = ref<MessageVO[]>([]);

const send =async () => {
    let res = await request({
        url: '/AddMessage',
        method: 'post',
        data: {
            content: `<span style="color:#409eff" >@${sendUser.value}</span> ${sendMessage.value}`,
            createTime: new Date(),
            userId: store.state.userinfo.userId,
            articleId: parseInt(id as string),
            username: store.state.userinfo.username,
            avatar: store.state.userinfo.avatar || tx,
        },
    });
    if (res.success) {
        ElMessage.success('发布成功！');
        messageForm.content = '';
        request({
            url: '/GetMessageList?articleId=' + id,
            method: 'get',
        }).then(res => {
            messageList.value = res.data;
        });
    } else {
        ElMessage.error(res.msg);
    }
    sendDialogVisible.value = false;
}

request({
    url: '/GetArticleById/' + id,
    method: 'get',
}).then(res => {
    data.value = res.data;
});
request({
    url: '/GetMessageList?articleId=' + id,
    method: 'get',
}).then(res => {
    messageList.value = res.data;
});

const submit = async () => {
    messageForm.createTime = new Date();

    let res = await request({
        url: '/AddMessage',
        method: 'post',
        data: messageForm,
    });
    if (res.success) {
        ElMessage.success('发布成功！');
        messageForm.content = '';
        request({
            url: '/GetMessageList?articleId=' + id,
            method: 'get',
        }).then(res => {
            messageList.value = res.data;
        });
    } else {
        ElMessage.error(res.msg);
    }
};

const delArticle = () => {
    request('/DeleteArticle/' + data.value.id, {
        method: 'get',
    }).then(res => {
        if (res.success) {
            ElMessage.success('删除成功');
            router.push('/');
        } else {
            ElMessage.error(res.msg);
        }
        dialogVisible.value = false;
    });
};
</script>

<style scoped lang="less">
.container {
    background-color: #fff;
    // width: 70%;
    // margin: 100px auto;
    padding: 20px 20%;
}
.bottom {
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding: 0 40px;
    margin-bottom: 50px;
}
.time {
    margin-right: auto;
}
.right-time {
    margin-right: 0;
    margin-left: auto;
}
.el-button + .el-button {
    margin-left: 0;
}
.message {
    margin-top: 150px;
    h3 {
        margin-bottom: 50px;
    }
}
.messageList {
    padding: 20px;
    box-shadow: 0 0 5px #ccc;
    border-radius: 10px;
    margin-bottom: 40px;
    .content {
        padding: 20px 0;
    }
    .info {
        display: flex;
        align-items: center;
       .create-time{
        margin-left: 30px;
        cursor: pointer;
      
       }
       .send{
        margin-left: auto;
       }
        img {
            border-radius: 50%;
            margin-right: 10px;
        }
    }
}
</style>
